import React from 'react'
import { useState, useEffect, memo } from 'react'
import { DatePicker, Select, Skeleton } from 'antd'
import HotelRoomList from '../HotelRoomList'
import './index.css'
import moment from 'moment'
import { ipList as presentIp } from '../../ipConfig'
import {
  preDay,
  nowDay,
  preWeek,
  nowMonth,
  preMonth,
  nowWeek,
  nowYear,
  preYear,
  getYearByNumber,
} from '../../utils'

const { Option } = Select
const { RangePicker } = DatePicker

function HotelsRoomList({ selectedTags }) {
  const [timeIndex, setTimeIndex] = useState('今日')
  const [time, setTime] = useState(nowDay())
  const [rangePickerValue, setRangePickerValue] = useState(false)
  const [rangePickerStartValue, setRangePickerStartValue] = useState('')
  const [rangePickerEndValue, setRangePickerEndValue] = useState('')
  const [indexOfSelectYear, setIndexOfSelectYear] = useState()
  const [dataOfSelectYears, setDataOfSelectYears] = useState(['今年'])
  const [colorOfTimeIndexYear, setColorOfTimeIndexYear] = useState('#000')
  const [hotelsRoom, setHotelsRoom] = useState([])
  const [flag, setFlag] = useState(0)
  const [hotellistId, setHotellistId] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let startYear = 2020
    let endYear = parseInt(moment(new Date()).format('YYYY'))
    let temp = []
    for (let i = endYear; i >= startYear; i--) {
      if (i === endYear) {
        temp.push('今年')
      } else if (i === endYear - 1) {
        temp.push('去年')
      } else {
        temp.push('' + i)
      }
    }
    setDataOfSelectYears(temp)
  }, [])

  useEffect(() => {
    const timer = setInterval(() => {
      let date = new Date()
      let seconds = date.getSeconds()
      if (seconds === 0) {
        let flagTemp = flag
        flagTemp++
        setFlag(flagTemp)
      }
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [flag])

  useEffect(() => {
    const hotellistId = []
    selectedTags.map((item) => {
      hotellistId.push(item.hotelId)
      return item
    })
    setHotellistId(hotellistId)
    setLoading(true)
  }, [selectedTags])

  useEffect(() => {
    if (hotellistId && hotellistId.length > 0) {
      let url = `${presentIp.DEV_IP}/readinvalid2?hotellist=${hotellistId}&leftTime=${time[0]}&rightTime=${time[1]}`
      console.log(url)

      fetch(url, {
        headers: {
          token: sessionStorage.getItem('token'),
        },
      })
        .then((response) => {
          return response.json()
        })
        .then((json) => {
          setHotelsRoom(json.data)
          setLoading(false)
        })
    }
  }, [hotellistId, time, flag])

  const changeTime = (index) => {
    let choice = ['今日', '昨日', '本周', '上周', '本月', '上月']
    setTimeIndex(index)
    switch (index) {
      case '今日':
        setTime(nowDay())
        break
      case '昨日':
        setTime(preDay())
        break
      case '本周':
        setTime(nowWeek())
        break
      case '上周':
        setTime(preWeek())
        break
      case '本月':
        setTime(nowMonth())
        break
      case '上月':
        setTime(preMonth())
        break
      case '今年':
        setTime(nowYear())
        break
      case '去年':
        setTime(preYear())
        break
      default:
        setTime(getYearByNumber(index))
    }
    setRangePickerValue(false)
    setIndexOfSelectYear(index)
    // 设置年份的颜色
    setColorOfTimeIndexYear('#1890ff')
    for (let i = 0; i < choice.length; i++) {
      if (choice[i] === index) {
        setColorOfTimeIndexYear('#000')
        setIndexOfSelectYear('')
      }
    }
  }

  const changeStartEndDate = (dates, dateStrings) => {
    if (dates) {
      setRangePickerValue(true)
      setRangePickerStartValue(dateStrings[0])
      setRangePickerEndValue(dateStrings[1])
      setTime(dateStrings)
      setTimeIndex(dateStrings)
      setColorOfTimeIndexYear('#000')
      setIndexOfSelectYear('')
    } else {
      console.log('Clear')
    }
  }

  const disabledDate = (current) => {
    return current && current > moment().endOf('day')
  }

  return (
    <>
      <div>
        <div className="content-for-hotels">
          <div
            className="content-time"
            style={{ display: hotelsRoom.length ? 'block' : 'none' }}>
            <ul className="content-list">
              <li className="content-item" onClick={() => changeTime('今日')}>
                <div className={timeIndex === '今日' ? 'item-blue' : ''}>
                  今日
                </div>
              </li>
              <li className="content-item" onClick={() => changeTime('昨日')}>
                <div className={timeIndex === '昨日' ? 'item-blue' : ''}>
                  昨日
                </div>
              </li>
              <li className="content-item" onClick={() => changeTime('本周')}>
                <div className={timeIndex === '本周' ? 'item-blue' : ''}>
                  本周
                </div>
              </li>
              <li className="content-item" onClick={() => changeTime('上周')}>
                <div className={timeIndex === '上周' ? 'item-blue' : ''}>
                  上周
                </div>
              </li>
              <li className="content-item" onClick={() => changeTime('本月')}>
                <div className={timeIndex === '本月' ? 'item-blue' : ''}>
                  本月
                </div>
              </li>
              <li className="content-item" onClick={() => changeTime('上月')}>
                <div className={timeIndex === '上月' ? 'item-blue' : ''}>
                  上月
                </div>
              </li>
              <li className="content-item">
                <Select
                  placeholder="今年"
                  style={{
                    width: 80,
                    color: colorOfTimeIndexYear,
                  }}
                  bordered={false}
                  onChange={changeTime}
                  key={indexOfSelectYear ? indexOfSelectYear : 'null'}
                  value={indexOfSelectYear ? indexOfSelectYear : null}>
                  {dataOfSelectYears.map((item) => {
                    return (
                      <Option value={item} key={item}>
                        {item}
                      </Option>
                    )
                  })}
                </Select>
              </li>
              <li className="content-item">
                <RangePicker
                  placeholder={['开始日期', '结束日期']}
                  value={
                    rangePickerValue === true
                      ? [
                          moment(new Date(rangePickerStartValue)),
                          moment(new Date(rangePickerEndValue)),
                        ]
                      : null
                  }
                  format={'YYYY-MM-DD'}
                  onChange={changeStartEndDate}
                  disabledDate={disabledDate}
                  separator="~"
                />
              </li>
            </ul>
          </div>
          <Skeleton loading={loading} active>
            <div>
              {hotelsRoom.length
                ? hotelsRoom.map((hotelroom) => (
                    <HotelRoomList
                      hotelroom={hotelroom}
                      key={hotelroom.hotelname}
                      time={time}
                    />
                  ))
                : ''}
            </div>
          </Skeleton>
        </div>
      </div>
    </>
  )
}

export default memo(HotelsRoomList)
